<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<jsp:include page="header.jsp">
	<jsp:param name="pageTitle" value="${community.name}" />
</jsp:include>
<script type="text/javascript">
var serviceId = ${service.id};
var communityId = ${community.id};
var contributeObj;
</script>
<c:if test="${not empty sessionUser}">
	<script type="text/javascript">
		$(function() {
			// contribute to service method		
			$("#contributeServiceButton")
					.click(
							function() {

								contributeObj = {
									activityID : serviceId,
									amountContributed : $(
											"#seServiceNumberContributed")
											.val(),
									userPhone : $("#stPhone").val()
								};

								console.log(JSON.stringify(contributeObj));
								$
										.ajax(
												{
													url : "contribute",
													type : "POST",
													data : JSON
															.stringify(contributeObj),
													contentType : "application/json",
													accepts : "application/json"
												})
										.done(
												function(s) {
													if (s == null) {
														console
																.alert("Please fill the required fields.");
														return;
													}
													console
															.log("success for add service "
																	+ s);

													$("#contributeService")
															.modal('hide');
												})
										.error(
												function(e) {
													contributeObj = e;
													console
															.log("error for contribute stuff "
																	+ e);
													alert("An error occurred. Please try again.");
												});
							});
		});
	</script>
</c:if>
<style type="text/css">
.datepicker {
	z-index: 1151 !important;
}

.container-fluid {
	margin-top: 40px;
	padding-bottom: 50px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.left-clm-comm-detail {
	position: relative;
	min-height: 1px;
}

.label-comm-name-detail {
	color: #f05607;
	display: inline;
	text-align: center;
	font-size: 16px;
}

.label-stuff-name-detail {
	color: #f05607;
	display: inline;
	text-align: center;
	font-size: 20px;
}

.label-welcome {
	color: #f05607;
	display: inline;
	text-align: center;
	font-size: 20px;
}

.comm-detail,.comm-name-detail {
	border: auto;
	border: 1px solid #E8EDED;
	padding: 10px 40px;
	background: #FFFFFF;
	width: 100%;
	border-radius: 25px;
	margin: 3px 3px;
	position: relative;
}

.stuff-detail,.stuff-name-detail {
	border: auto;
	border: 5px solid #E8EDED;
	padding: 10px 40px;
	background: #FFFFFF;
	width: 100%;
	border-radius: 25px;
	margin: 3px 3px;
	position: relative;
}

.member {
	margin-top: 30px;
	width: 100%;
	height: 40px;
	font-size: x-large;
}

.right-stuff-detail-number {
	color: #f05607;
	font-size: 80px;
	line-height: 40px;
}

.right-stuff-detail-explanation {
	color: #f05607;
	font-size: 14px;
	line-height: 40px;
}

#stuffDetail {
	margin-top: 30px;
}

.btn-group-vertical {
	padding: 10px 40px;
	width: 30%;
	margin: 3px 3px;
	position: relative;
	float: right;
	right: 27px;
}
</style>
<div class="container-fluid">

	<div class="row">
		<!-- Left column for description -->
		<div class="col-md-3 no-float left-clm-comm-detail">
			<div class="comm-name-detail">
				<label class="label-comm-name-detail">${community.name}</label>
			</div>
			<div class="comm-detail">
				<td>${community.description}</td>
			</div>
			<c:if test="${not empty sessionUser}">
			</c:if>
		</div>
		<!-- details of the stuff -->
		<div class="col-md-9 no-float">
			<div class="row">
				<div class="col-md-8 no-float">
					<fmt:formatNumber var="completeRate"
						value="${service.serviceNumberContributed/service.serviceNumberRequested * 100}"
						maxFractionDigits="2" />
					<div class="col-md-11 stuffItem">
						<p>
							<strong class="label-stuff-name-detail">${service.name}</strong>
							<strong class="pull-right text-muted label-stuff-name-detail">${completeRate}%
								Complete</strong>
						</p>
						<div class="progress progress-striped active">
							<div class="progress-bar progress-bar-primary" role="progressbar"
								aria-valuemin="0"
								aria-valuemax="${service.serviceNumberRequested}"
								style="width:${service.serviceNumberContributed/service.serviceNumberRequested * 100}%">
							</div>
						</div>

						<div class="stuff-detail">
							<td>${service.description}</td>
						</div>
						<div class="stuff-detail">
							<td>${service.endDateTime}</td>
						</div>
						<div class="stuff-detail">
							<td>${service.location}</td>
						</div>
						<c:if test="${not empty sessionUser}">
						<div class="btn-group-vertical" role="group" aria-label="...">
							<a href="#" data-toggle="modal" type="button" align="center"
								class="btn btn-lg btn-primary" data-target="#contributeService">Contribute
							</a>
						</div>
					</c:if>
					</div>
					
				</div>
				<div class="col-md-3 no-float">
					<div class="col-md-3 stuffItem" id="serviceDetail">
						<div>
							<strong class="right-stuff-detail-number">${service.serviceNumberContributed}</strong>
						</div>
						<div>
							<strong class="right-stuff-detail-explanation">&nbsp;collected</strong>
						</div>
						</br>
						<div>
							<strong class="right-stuff-detail-number">${service.serviceNumberRequested}</strong>
						</div>
						<div>
							<strong class="right-stuff-detail-explanation">&nbsp;requested</strong>
						</div>
					</div>
				</div>
			</div>
			<!-- activity feed column -->
			<div class="row">
				<div id="allActivities" style="margin-left: 18px;">
					<c:choose>
						<c:when test="${feedItems.size() == 0}">
							<span id="noActivities">There is no activity.</span>
						</c:when>
						<c:otherwise>
							<c:forEach var="fi" items="${feedItems}">
								<div class="row">${fi.userName}
									contributed
									<c:if test="${not empty fi.insertionDate}"> at ${fi.insertionDate} </c:if>
									with the amount of <strong>${fi.amountContributed}</strong>.
								</div>
								<br>
							</c:forEach>
						</c:otherwise>
					</c:choose>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="contributeService" tabindex="-1"
	role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Contribute to
					${service.name} Service in ${community.name}</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="seServiceNumberContributed" class="control-label">Contributed
						Amount</label> <input type="number" id="seServiceNumberContributed"
						class="form-control" required="required" />
				</div>
				<div class="form-group">
					<label for="seName" class="control-label">Name</label> <input
						type="text" id="seName" class="form-control"
						value="${service.name}" readonly="readonly" required="required" />
				</div>
				<div class="form-group">
					<label for="seEmail" class="control-label">E-mail</label> <input
						type="text" id="seEmail" value="${sessionUser.email}"
						class="form-control" required="required" />
				</div>
				<div class="form-group">
					<label for="sePhone" class="control-label">Phone Number</label> <input
						type="text" id="sePhone" class="form-control" required="required" />
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary"
					id="contributeServiceButton">Contribute</button>
			</div>
		</div>
	</div>
</div>


</body>
</html>
